<!--
 * @Author: lmk
 * @Date: 2022-04-14 13:41:09
 * @LastEditTime: 2022-07-08 09:56:08
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div>
    <!-- 首页banner -->
    <div class="relative" v-if="state.bannerList.length">
      <swiper
        :modules="modules"
        :autoplay="true"
        @slideChange="onSlideChange"
        :pagination="{
          el: '.banner-nav',
          clickable: true,
        }"
        :navigation="{
          nextEl: '.right-next',
          prevEl: '.left-prev',
        }"
      >
        <swiper-slide v-for="(item, index) in state.bannerList" :key="index">
          <div
            class="banner-view"
            :style="{ backgroundImage: `url(${item.bannerUrl})` }"
          >
            <div class="banner-txt">
              <p v-if="isZh" class="bannerName-zh">{{ item.bannerName }}</p>
              <p class="bannerName-en">{{ item.bannerEnglishName }}</p>
              <!-- <p>A musical journey that meets nature and gently opensthe wonderful doors of nature</p> -->
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div
        class="left-pagination absolute hide-mobile"
        :style="{ width: `${state.bannerList.length * 120}px` }"
      >
        <div
          class="pagination-active absolute"
          :style="{ left: `${activeIndex * 120}px` }"
        ></div>
      </div>
      <div class="right-nav absolute flex hide-mobile">
        <img
          :src="`/img/home/left${activeIndex !== 0 ? '-active' : ''}.png`"
          alt=""
          class="arrow left-prev"
        />
        <img
          src="/img/home/banner-line.png"
          alt=""
          class="line"
          v-if="state.bannerList.length > 1"
        />
        <img
          :src="`/img/home/right${
            activeIndex !== state.bannerList.length - 1 ? '-active' : ''
          }.png`"
          alt=""
          class="arrow right-next"
        />
      </div>
      <div class="banner-nav"></div>
    </div>
    <div>
      <!-- 活动列表 -->
      <!-- <div class="music-view-title">
        <comonTitle
          :entitle="$t('home.titleActiveEn')"
          :zhtitle="$t('home.titleActiveZh')"
        />
      </div> -->
      <div class="music-view mb-2">
        <div class="title music-title">
          <comonTitle
            :entitle="$t('home.titleActiveEn')"
            :zhtitle="$t('home.titleActiveZh')"
          />
        </div>
        <calendar
          @changeMonth="changeCalendar"
          v-model:activeArr="currentMonthArr"
          class="hide-mobile"
        />
        <calendar
          @changeMonth="changeCalendar"
          v-model:activeArr="currentMonthArr"
          isWeek
          class="hide-pc"
        />
        <div class="hide-mobile">
          <swiper
            :modules="modules"
            :autoplay="{
              delay: 7000
            }"
            @slideChange="onPcActiveSlideChange"
            :virtual="true"
          >
            <swiper-slide
              v-for="(slideContent, index) in musicList"
              :key="index"
              :virtualIndex="index"
            >
              <musicList :musicList="slideContent"></musicList>
            </swiper-slide>
          </swiper>
        </div>
        <div class="hide-pc">
          <swiper
            :modules="modules"
            :autoplay="{
              delay: 4000
            }"
            @slideChange="onMobileActiveSlideChange"
            :virtual="true"
          >
            <swiper-slide
              v-for="(slideContent, index) in musicMobileList"
              :key="index"
              :virtualIndex="index"
            >
              <musicList :musicList="slideContent"></musicList>
            </swiper-slide>
          </swiper>
        </div>
        <div
          v-if="musicList.length || musicMobileList.length"
          class="flex more justify-end items-center activity-more"
          @click="$router.push('/activity')"
        >
          more
          <img src="/img/home/bg-arrow-right.png" alt="" />
        </div>
      </div>
      <div class="info-view">
        <div class="title">
          <comonTitle
            :entitle="$t('home.titleInfoEn')"
            :zhtitle="$t('home.titleInfoZh')"
          />
        </div>
        <!-- 乐团简介 -->
        <div class="flex info-box">
          <img :src="$t('bandFigureImage')" class="info-image" alt="" />
          <div class="flex-1 flex flex-col">
            <div class="flex-grow">
              <p class="info-title">{{ $t("bandName") }}</p>
              <p class="info-content line-clamp-4">{{ $t("bandDesc") }}</p>
            </div>
            <div
              class="flex more justify-end items-center hide-mobile"
              @click="aboutPage"
            >
              more
              <img src="/img/home/bg-arrow-right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="news-view">
        <!-- 新闻 -->
        <div class="news title">
          <comonTitle
            :entitle="$t('home.titleNewsEn')"
            :zhtitle="$t('home.titleNewsZh')"
          />
        </div>
        <div class="grid grid-cols-5 news-content" v-if="state.newsList.length">
          <div class="swiper-view col-span-3">
            <swiper
              :pagination="{
                el: '.pagination',
                clickable: true,
              }"
              :autoplay="true"
              :modules="modules"
              @slideChange="onNewsSlideChange"
              class="news-swiper"
            >
              <swiper-slide
                v-for="(item, index) in state.newsList"
                :key="index"
              >
                <div class="relative">
                  <img
                    :src="item.informationFigureImage"
                    alt=""
                    @click="newsDetail(item)"
                    class="slide-image"
                  />
                  <div
                    class="
                      absolute
                      bottom-0
                      inset-x-0
                      flex
                      items-center
                      news-item-img-box
                    "
                  >
                    <div class="truncate">
                      {{
                        isZh
                          ? item.informationTitle
                          : item.informationTitleEnglish
                      }}
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div class="pagination"></div>
          </div>
          <div class="flex col-span-2">
            <img
              src="/img/home/new-line.png"
              alt=""
              class="news-line flex-none hide-mobile"
            />
            <div class="flex-grow">
              <div
                v-for="(item, index) in state.newsList"
                @click="newsDetail(item)"
                :key="index"
                class="flex news-item"
                :class="{ active: index === state.newsAcitveIndex }"
              >
                <span class="flex-shrink flex-grow truncate">{{
                  isZh ? item.informationTitle : item.informationTitleEnglish
                }}</span>
                <span class="time flex-none">{{
                  item.informationCreateTime
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-view relative">
        <div class="hide-mobile">
          <div class="members-arrow our-pc-prev absolute  top-1/2 left-2 z-10">
          <img
            :src="`/img/home/left${
              ourActiveIndex !== 0 ? '' : '-active'
            }.png`"
            alt=""
          />
        </div>
        <div class="members-arrow our-pc-next absolute top-1/2 right-2 z-10">
          <img
            :src="`/img/home/right${
              ourActiveIndex !== state.members.length - 1 ? '' : '-active'
            }.png`"
            alt=""
          />
        </div>
        </div>
        <div class="hide-pc">
            <div class="members-arrow our-mobile-prev absolute  top-1/2 left-2 z-10">
            <img
              :src="`/img/home/left${
                ourActiveIndex !== 0 ? '' : '-active'
              }.png`"
              alt=""
            />
          </div>
          <div class="members-arrow our-mobile-next absolute top-1/2 right-2 z-10">
            <img
              :src="`/img/home/right${
                ourActiveIndex !== state.mobileMembers.length - 1 ? '' : '-active'
              }.png`"
              alt=""
            />
          </div>
        </div>
        <!-- 我们的乐团 -->
        <div class="our flex justify-between items-center">
          <div class="title">
            <comonTitle
              :entitle="$t('home.titleOurEn')"
              :zhtitle="$t('home.titleOurZh')"
            />
          </div>
        </div>
        <div class="hide-mobile pc-members">
          <swiper
            :modules="modules"
            @slideChange="onOurSlideChange"
            :virtual="true"
            :navigation="{
              nextEl: '.our-pc-next',
              prevEl: '.our-pc-prev',
            }"
          >
            <swiper-slide
              v-for="(slideContent, index) in state.members"
              :key="index"
              :virtualIndex="index"
            >
              <div class="grid grid-cols-6 gap-3">
                <div v-for="(item,index) in slideContent" :key="index"  @click="memberDetail(item)">
                  <img
                    :src="item.actorPhoto"
                    alt=""
                    class="members-img"
                  />
                  <div class="members-tag acitve members-tag-content">
                    <p class="active truncate pt-1.5">
                      {{ isZh ? item.actorJob + "/" : ""
                      }}{{ isZh ? item.actorName : item.actorNameEnglish }}
                    </p>
                    <p class="truncate">{{ item.actorJobEnglish }}</p>
                    <!-- <div class="flex more items-center">
                      more
                      <div class="right-arrow flex justify-center">
                        <img src="/img/home/right-active.png" alt="" />
                      </div>
                    </div> -->
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <div class="hide-pc mobile-members">
          <swiper
            :modules="modules"
            @slideChange="onOurSlideChange"
            :virtual="true"
            :navigation="{
              nextEl: '.our-mobile-next',
              prevEl: '.our-mobile-prev',
            }"
          >
            <swiper-slide
              v-for="(slideContent, index) in state.mobileMembers"
              :key="index"
              :virtualIndex="index"
            >
              <div class="grid grid-cols-2 gap-3">
                <div v-for="(item,index) in slideContent" :key="index"  @click="memberDetail(item)">
                  <img
                    :src="item.actorPhoto"
                    alt=""
                    class="members-img"
                  />
                  <div class="members-tag acitve members-tag-content">
                    <p class="active truncate pt-1.5">
                      {{ isZh ? item.actorJob + "/" : ""
                      }}{{ isZh ? item.actorName : item.actorNameEnglish }}
                    </p>
                    <p class="truncate">{{ item.actorJobEnglish }}</p>
                    <!-- <div class="flex more items-center">
                      more
                      <div class="right-arrow flex justify-center">
                        <img src="/img/home/right-active.png" alt="" />
                      </div>
                    </div> -->
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 友情链接 -->
      <div class="title hide-mobile links-title">
        <comonTitle
          :entitle="$t('home.titleLinksEn')"
          :zhtitle="$t('home.titleLinksZh')"
        />
      </div>
      <div class="links relative">
        <div class="links-view absolute flex justify-center items-center">
          <a
            v-for="(item, index) in state.links"
            :key="index"
            class="link-item"
            target="_blank"
            :href="item.linksJumpUrl"
          >
            <div class="link-img flex justify-center items-center">
              <img :src="item.linksIcon" alt="" />
            </div>
            <p class="link-name text-center">{{ item.linksName }}</p>
          </a>
        </div>
      </div>
      <!-- 文创周边 -->
      <div class="creativeSurroundings">
        <div class="title hide-mobile">
          <comonTitle
            :entitle="$t('home.titleCreativeEn')"
            :zhtitle="$t('home.titleCreativeZh')"
          />
        </div>
        <div class="grid grid-cols-4 gap-4">
          <a
            v-for="(item, index) in state.creativeSurroundingsList"
            :key="index"
            target="_blank"
            :href="item.goodsJumpUrl"
            class="creativeSurroundings-item"
          >
            <img :src="item.goodsFigureDesc" alt="" class="goodsFigureDesc" />
            <div class="text-center">
              <p class="name leading-5">
                {{ isZh ? item.goodsName : item.goodsNameEnglish }}
              </p>
              <p class="price">¥{{ item.goodsPrice }}</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Autoplay, Navigation, Pagination, Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";

import "swiper/swiper-bundle.css";
import { reactive, ref } from "@vue/reactivity";
import calendar from "@/components/calendar";
import musicList from "@/components/musicList";
import dayjs from "dayjs";
import comonTitle from "@/components/comonTitle";
import { useIsZh } from "@/utils/useIsZh";
import {
  getBanner,
  listActivityDate,
  listWebsiteActor,
  listWebsiteGoods,
  listWebsiteThreeLinks,
  pageWebsiteActivity,
  pageWebsiteInformation,
} from "@/api/api";
import { useRouter } from "vue-router";
export default {
  components: {
    Swiper,
    SwiperSlide,
    calendar,
    musicList,
    comonTitle,
  },
  setup() {
    const { isZh } = useIsZh();
    const activeIndex = ref(0);
    const ourActiveIndex = ref(0);
    // 监听banner index变化
    const onSlideChange = (swiper) => (activeIndex.value = swiper.activeIndex);
    const onOurSlideChange = (swiper) =>
      (ourActiveIndex.value = swiper.activeIndex);
    // 获取当月数据
    // 获取banner
    const state = reactive({
      bannerList: [],
      members: [], // 成员
      mobileMembers: [], // 手机端成员
      newsList: [], // 新闻
      creativeSurroundingsList: [], // 文创周边
      newsAcitveIndex: 0,
      links: [], // 友情链接
    });
    // banner
    getBanner().then((res) => {
      state.bannerList = res;
    });
    // 我们的乐团
    listWebsiteActor().then((res) => {
      const pcMax = 6;
      const mobileMax = 4;
      const arrLength = Math.ceil(res.length / pcMax);
      const mobileArrLength = Math.ceil(res.length / mobileMax);
      for (let i = 0; i < arrLength; i++) {
        state.members.push(res.slice(i * pcMax, (i + 1) * pcMax));
      }
       for (let i = 0; i < mobileArrLength; i++) {
        state.mobileMembers.push(
          res.slice(i * mobileMax, (i + 1) * mobileMax)
        );
      }
        
    });
    // 新闻列表
    pageWebsiteInformation({ current: 1, size: 4, informationName: "" }).then(
      (res) => {
        state.newsList = res.records.map((val) => {
          val.informationCreateTime = dayjs(val.informationCreateTime).format(
            "YYYY-MM-DD"
          );
          return val;
        });
      }
    );
    // 活动商品
    listWebsiteGoods().then((res) => {
      state.creativeSurroundingsList = res;
    });
    // 新闻列表切换
    const onNewsSlideChange = (swiper) =>
      (state.newsAcitveIndex = swiper.activeIndex);
    const router = useRouter();
    const newsDetail = (item) => {
      router.push(`/news/${item.informationId}`);
    };
    // 友情链接
    listWebsiteThreeLinks().then((res) => {
      state.links = res;
    });
    const aboutPage = () => {
      router.push("/about");
    };
    // 人员详情
    const memberDetail = () => {
      router.push('/about');
    };
    return {
      onSlideChange,
      activeIndex,
      state,
      modules: [Navigation, Pagination, Autoplay, Virtual],
      isZh,
      onNewsSlideChange,
      onOurSlideChange,
      ourActiveIndex,
      newsDetail,
      aboutPage,
      memberDetail,
    };
  },
  data() {
    return {
      currentMonthArr: [],
      musicList: [],
      ourPcActiveIndex: 0,
      musicMobileList: [],
      ourMobileActiveIndex: 0,
      currentMonth: "",
      links: [
        {
          name: "Tiktok",
          url: "tiktok",
        },
        {
          name: "Youku",
          url: "youku",
        },
        {
          name: "Twitter",
          url: "twitter",
        },
        {
          name: "Facebook",
          url: "facebook",
        },
        {
          name: "Sina",
          url: "sina",
        },
      ],
    };
  },
  methods: {
    changeCalendar(month) {
      this.currentMonth = month;
      this.currentMonthArr = [];
      listActivityDate({ month, map: {} }).then((res) => {
        this.currentMonthArr = res.map((val) => dayjs(val).format("DD"));
      });
      this.musicList = [];
      this.musicMobileList = [];
      this.ourPcActiveIndex = 0;
      this.ourMobileActiveIndex = 0;
      // 自动显示本月全部演出信息，已结束的图片灰度处理or未开始活动图标高亮显示之类的。另外日历部需要加入【演出信息】几个字
      this.getActivityList();
      this.getMobileActivityList();
    },
    getActivityList() {
      pageWebsiteActivity({
        size: 4,
        type: 3,
        date: this.currentMonth,
        current: this.ourPcActiveIndex + 1,
        activityName: "",
      }).then((res) => {
        if (this.musicList.length === 0) this.musicList = new Array(res.pages);
        if (this.musicList.length > 0) {
          this.musicList[this.ourPcActiveIndex] = res.records;
        }
      });
    },
    getMobileActivityList() {
      pageWebsiteActivity({
        size: 2,
        type: 3,
        date: this.currentMonth,
        current: this.ourMobileActiveIndex + 1,
        activityName: "",
      }).then((res) => {
        if (this.musicMobileList.length === 0)
          this.musicMobileList = new Array(res.pages);
        if (this.musicMobileList.length > 0) {
          this.musicMobileList[this.ourMobileActiveIndex] = res.records;
        }
      });
    },
    onPcActiveSlideChange(swiper) {
      this.ourPcActiveIndex = swiper.activeIndex;
      this.getActivityList();
    },
    onMobileActiveSlideChange(swiper) {
      this.ourMobileActiveIndex = swiper.activeIndex;
      this.getMobileActivityList();
    },
  },
};
</script>

<style lang="scss" scoped>
.banner-view {
  background-position: center;
  background-size: 100% 100%;
  overflow: hidden;
  .banner-txt {
    text-align: center;
    margin-top: 90px;
    p {
      font-family: "zyt";
      &:first-child {
        font-size: 26px;
        font-weight: 400;
        color: #ffffff;
      }
      &:last-child {
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        margin-top: 19px;
      }
    }
  }
}
.members-arrow{
  &.swiper-button-disabled{
    background: #707070;
  }
}
@media screen and (min-width: 1400px) {
  .members-arrow{
    width: 60px;
    height: 40px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4b268;
    img{
      width: 15px;
    }
  }
  .title {
    padding: 23px 0 60px;
    &.links-title {
      margin-left: 80px;
      padding-bottom: 0;
    }
  }
  .our-arrow {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    img {
      width: 10px;
      height: 20px;
    }
  }
  .banner-view {
    height: 960px;
    .banner-txt {
      margin-top: 164px;
      p {
        &:first-child {
          font-size: 60px;
        }
        .bannerName-zh {
          font-size: 24px;
          margin-top: 23px;
        }
      }
    }
  }
  .right-nav {
    right: 80px;
    bottom: 72px;
    z-index: 3;
    user-select: none;
    .arrow {
      width: 10px;
      cursor: pointer;
    }
    .line {
      height: 20px;
      margin: 0 8px;
    }
  }
  .left-pagination {
    height: 4px;
    background-color: #ffffff;
    left: 120px;
    bottom: 70px;
    z-index: 3;
    .pagination-active {
      background: $activeTxt;
      height: 4px;
      width: 120px;
      left: 0;
      transition: left 0.3s;
    }
  }
  .music-view-title {
    margin-top: 23px;
    padding: 0 80px;
  }
  .music-view {
    background: url("/img/home/bg.png") no-repeat;
    background-size: 100% 742px;
    background-position: center;
    padding: 0 80px 0;
    .calendar {
      background: #fffaf5;
    }
    .music-title-box {
      margin-bottom: 20px;
    }
  }
  .info-box {
    padding-bottom: 60px;
  }
  .info-image {
    width: 528px;
    display: block;
    margin-right: 52px;
    height: 328px;
    object-fit: cover;
    border: 1px solid $activeTxt;
  }
  .info-view {
    padding: 0 80px;
    background: url("/img/home/actorbg.png") no-repeat #faf0e9;
    background-size: 100% 1595px;
    background-position: top;
    overflow: hidden;
    .members-img {
      width: 100%;
      object-fit: cover;
      height: calc((100vw - 160px - 0.75rem) / 6  * 0.78);
    }
    // .our {
    //   margin-top: 61px;
    // }
    // .our-view {
    //   padding-bottom: 15px;
    //   .leader {
    //     margin-right: 28px;
    //     cursor: pointer;
    //     .leader-img {
    //       width: calc((100vw - 174px) / 2);
    //       height: calc((100vw - 174px) / 2);
    //       object-fit: cover;
    //     }
    //   }
    //   .right-members {
    //     .members-view {
    //       cursor: pointer;
    //       .members-img {
    //         width: calc((100vw - 174px) / 2);
    //         height: calc((100vw - 174px) / 4 - 50px);
    //         object-fit: cover;
    //       }
    //     }
    //   }
    //   .members-tag {
    //     height: 80px;
    //     padding: 0 30px 0 42px;
    //     &-content {
    //       font-size: 20px;
    //     }
    //     .right-arrow {
    //       width: 32px;
    //       height: 32px;
    //       img {
    //         width: 10px;
    //         height: 20px;
    //       }
    //     }
    //   }
    // }
  }
  .news-view {
    padding: 0 80px;
    .swiper-pagination {
      bottom: -30px;
    }
    .news {
      margin-top: 23px;
    }
    .news-content {
      // margin: 60px 0;
      padding-bottom: 60px;
      .slide-image {
        height: 350px;
        width: 100%;
        object-fit: cover;
        cursor: pointer;
        border: 1px solid #d4b268;
      }
    }
    .news-line {
      height: 350px;
      width: 1px;
      margin-right: 10px;
      margin-left: 28px;
    }
  }
  .creativeSurroundings {
    padding: 50px 80px;
    &-item {
      line-height: 1;
      .name {
        font-size: 20px;
        font-weight: 400;
        color: #ffffff;
        margin-top: 16px;
        line-height: 30px;
        margin-bottom: 17px;
      }
      .price {
        font-size: 20px;
        font-weight: 400;
        color: $activeTxt;
      }
      .goodsFigureDesc {
        width: 100%;
        height: calc((100vw - 160px - 4px) / 4 * 0.65);
        border: 1px solid #d4b268;
      }
    }
  }
  .info-title {
    font-size: 24px;
    font-weight: bold;
    color: #202020;
  }
  .info-content {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #707070;
    line-height: 40px;
    text-indent: 2em;
    margin-top: 20px;
  }
  .members-tag {
    height: 70px;
    padding: 0 20px 0 42px;
    &-content {
      font-size: 20px;
    }
    .right-arrow {
      width: 32px;
      height: 32px;
      img {
        width: 10px;
        height: 20px;
        margin-left: 0;
      }
    }
  }

  .more {
    color: $activeTxt;
    font-size: 20px;
    cursor: pointer;
    img {
      width: 22px;
      height: 22px;
      display: inline-block;
      margin-left: 10px;
    }
  }

  .news-item-img-box {
    height: 80px;
    background: transparentize($color: #000000, $amount: 0.29);
    color: $activeTxt;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    padding-left: 20px;
    div {
      width: 50%;
    }
    .our-arrow {
      width: 32px;
      height: 32px;
      margin-left: 8px;
      img {
        width: 10px;
        height: 20px;
      }
    }
  }
  .news-item {
    width: 100%;
    height: 80px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    background: #202020;
    padding: 0 14px 0 20px;
    line-height: 80px;
    cursor: pointer;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    &.active {
      background: $activeTxt;
    }
    .truncate {
      display: block;
    }
    .time {
      margin-left: 52px;
    }
  }
  .links {
    height: 160px;
    background-image: url(/img/home/links.png);
    background-size: 1920px 160px;
    background-position: center;
    margin-top: 23px;
    &-view {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      line-height: 1;
      background: transparentize($color: #d4b268, $amount: 0.58);
      .link-img {
        width: 80px;
        height: 80px;
        img {
          width: 60px;
          max-height: 80px;
        }
      }
      .link-name {
        margin-top: 18px;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
      }
    }
    .link-item {
      margin: 0 60px;
    }
  }
  .activity-more {
    padding-top: 15px;
    padding-bottom: 60px;
  }
  .pc-members{
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 1401px) {
  .members-arrow{
    width: 30px;
    height: 20px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4b268;
    img{
      width: 7px;
    }
  }
  .activity-more {
    padding-bottom: 15px;
  }
  .banner-view {
    height: 50vw;
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;
    .banner-txt {
      text-align: center;
      margin-top: 40px;
      p {
        font-family: "zyt";
        &:first-child {
          font-size: 26px;
          font-weight: 400;
          color: #ffffff;
        }
        &:last-child {
          font-size: 18px;
          font-weight: 400;
          color: #ffffff;
          margin-top: 19px;
        }
      }
    }
  }
  .info-content {
    font-size: 7px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #707070;
    line-height: 20px;
    text-indent: 2em;
    margin-top: 10px;
  }
  .info-title {
    font-size: 12px;
    font-weight: bold;
    color: #202020;
    margin-top: 10px;
  }

  .music-view-title {
    margin-top: 23px;
    padding: 0 15px;
  }
  .music-view {
    background: url("/img/home/bg.png") no-repeat;
    background-size: 100% 742px;
    background-position: center;
    padding: 0 15px 0;
    .calendar {
      background: #fffaf5;
      margin-bottom: 12px;
    }
    .our-arrow {
      &:last-child {
        margin-right: 0;
      }
    }
    .music-title-box {
      margin-bottom: 10px;
    }
  }
  .banner-nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    text-align: center;
  }
  .title {
    padding: 15px;
    &.music-title {
      padding: 15px 0;
    }
  }
  .info-box {
    display: block;
    padding: 0 15px 15px;
  }
  .info-image {
    width: 100%;
    height: calc((100vw - 30px - 4px) * 0.65);
    border: 1px solid $activeTxt;
    margin-bottom: 10pxbandemail;
  }
  .info-view {
    background: url("/img/home/actorbg.png") no-repeat #faf0e9;
    background-size: 100% 1595px;
    background-position: top;
    overflow: hidden;
    padding-bottom: 10px;

    .members-img {
      width: 100%;
      object-fit: cover;
      height: calc((100vw - 30px - 0.75rem) / 2  * 0.78);
    }
    .mobile-members{
      padding: 0 15px 15px;
    }
  }

  .our-arrow {
    width: 22px;
    height: 22px;
    margin-left: 5px;
    &:last-child {
      margin-right: 30px;
    }
    img {
      width: 5px;
      height: 10px;
    }
  }
  // .our-view {
  //   display: block;
  //   padding: 0 15px;
  //   .leader {
  //     .leader-img {
  //       width: 100%;
  //       height: calc(100vw - 60px);
  //       object-fit: cover;
  //     }
  //   }
  //   .members-img {
  //     width: 100%;
  //     height: calc((100vw - 60px) / 2);
  //     object-fit: cover;
  //   }
  // }
  .members-view {
    margin-top: 10px;
  }
  .news-content {
    display: block;
    padding: 0 15px 15px;
  }
  .slide-image {
    height: calc((100vw - 60px) * 0.55);
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #d4b268;
  }
  .links {
    padding: 0 15px;
  }
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .goodsFigureDesc {
    width: 100%;
    height: calc((100vw - 60px - 4px) / 2 * 0.65);
    border: 1px solid #d4b268;
  }
  .creativeSurroundings {
    padding: 40px 15px 20px;
    &-title {
      margin-top: 10px;
    }
    &-item {
      line-height: 1;
      .name {
        font-size: 10px;
        font-weight: 400;
        color: #ffffff;
        margin-top: 8px;
        margin-bottom: 9px;
      }
      .price {
        font-size: 10px;
        font-weight: 400;
        color: $activeTxt;
      }
    }
  }

  .members-tag {
    height: 40px;
    padding: 0 10px;
    &-content {
      font-size: 10px;
    }
    .right-arrow {
      width: 16px;
      height: 16px;
      img {
        width: 5px;
        height: 10px;
        margin-left: 0;
      }
    }
  }
  .more {
    color: $activeTxt;
    font-size: 10px;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      display: inline-block;
      margin-left: 5px;
    }
  }

  .news-item-img-box {
    height: 40px;
    background: transparentize($color: #000000, $amount: 0.29);
    color: $activeTxt;
    font-size: 10px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    padding-left: 10px;
    div {
      width: 50%;
    }
    .our-arrow {
      width: 32px;
      height: 32px;
      margin-left: 8px;
      img {
        width: 10px;
        height: 20px;
      }
    }
  }
  .news-item {
    width: 100%;
    height: 40px;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    padding: 0 7px 0 10px;
    line-height: 40px;
    margin-top: 10px;
    cursor: pointer;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    &.active {
      background: $activeTxt;
    }
    .truncate {
      display: block;
    }
    .time {
      margin-left: 26px;
    }
  }
  .links {
    height: 80px;
    background-image: url(/img/home/links.png);
    background-size: 1920px 80px;
    background-position: center;
    margin-top: 10px;
    &-view {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      line-height: 1;
      background: transparentize($color: #d4b268, $amount: 0.58);
      .link-img {
        width: 40px;
        height: 40px;
        img {
          width: 30px;
          max-height: 40px;
        }
      }
      .link-name {
        margin-top: 8px;
        font-size: 9px;
        font-weight: bold;
        color: #ffffff;
      }
    }
    .link-item {
      margin: 0 15px;
    }
  }
}
// 公用样式

.our-arrow {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $activeTxt;
  cursor: pointer;
  &.swiper-button-disabled {
    background: #707070;
  }
}

.members-tag {
  background: #707070;
  &.acitve {
    background-color: $activeTxt;
    color: white;
    .active {
      color: white;
    }
  }
  &-content {
    color: white;
    .active {
      color: $activeTxt;
    }
  }
  .right-arrow {
    background: #707070;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    align-items: center;
  }
}
</style>

<style lang="scss">
.banner-nav {
  .swiper-pagination-bullet {
    background: white;
  }
  .swiper-pagination-bullet-active {
    background: $activeTxt;
  }
}
.pagination {
  text-align: center;
  margin-top: 20px;
  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 3px 3px 4px 3px;
    background: #707070;
    margin: 0 7px;
    &-active {
      background: $activeTxt;
      border-radius: 4px;
    }
  }
}
</style>